<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <script th:src="@{/js/vue.js}"></script>
</head>
<body>
<div th:insert="publicHesder"></div>
<script th:src="@{/js/publicHeader.js}"></script>
<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">


<div class="container">

    <div class="row">
        <a href="/register.html">还没有账号?点我立即去注册</a>
        <div class="col-md-4 col-md-offset-4" style="border: 1px solid #cccccc ;border-radius: 5px;margin-top: 10px">
            <p style="color: red" th:text="${errorInfo}">errorInfo</p>
            <form action="/user/login" method="post">
                <div class="form-group">
                    <label for="exampleInputEmail1">username</label>
                    <input v-model="loginFrom.username" type="text" name="username" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">password</label>
                    <input v-model="loginFrom.password" type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
                </div>

                <button type="submit" class="btn btn-success" @click.prevent="toLogin">登 录</button>
            </form>
        </div>
    </div>

</div>



</div>
<script>
    console.log(".........login...........")
    let login = new Vue({
        el: "#app"
        ,
        data:{
            loginFrom:{
                username:'',
                password:''
            }
        }
        ,
        methods:{
            toLogin(){
                $.post("/user/login",this.loginFrom,function (data) {
                    if (data==='ok'){
                        location.href="/";
                    }else{
                        alert(data)
                    }
                })
            }


        }
        ,
        created(){

        }
    });
</script>

</body>
</html>